<template>
	<view>
		<view class="bind-head" style="padding: 0 40rpx;">
			<view class="flex-col flex-ali-sta flex-jus-cen" style="height: 100%;">
				<view class="bold-text f-s-34 m-t-70">欢迎登录！</view>
				<view class="title bold-text f-s-30 m-t-30">
					<text>{{groupName}}掌上管理助手</text>
				</view>
			</view>
		</view>
		<view class="m-t-30" style="padding: 0 40rpx;">
			<view class="bold-text"><text class="f-s-30">账号</text></view>
			<view class="p-t-16 p-b-16 m-t-10">
				<input class="uni-input" placeholder-style="font-size:28rpx" :adjust-position="false" type="number"
					v-model="phone" placeholder="请输入登录账号" />
			</view>
			<view class="bold-text m-t-30"><text class="f-s-30">密码</text></view>
			<view class="p-t-16 p-b-16 m-t-10">
				<input class="uni-input" placeholder-style="font-size:28rpx" :adjust-position="false" type="password" v-model="password"
					placeholder="请输入登录密码" />
			</view>
			<view class="m-t-60">
				<button class="btn-login" type="primary" size="mini" :disabled="phone=='' || password==''"
					@click="login">登录</button>
			</view>
			<view class="m-t-30 flex" @click="toBind">
				<!-- <text class="mar-auto f-s-24">忘记密码？</text> -->
				<text class="mar-auto f-s-24" style="color: var(--grey-text);">退出绑定?</text>
			</view>
		</view>
		<bottom-company-vue :footerStyle="footerStyle"></bottom-company-vue>
	</view>
	<custom-loading-vue ref="loading"></custom-loading-vue>
</template>

<script setup>
	import {
		onMounted,
		ref,
		getCurrentInstance
	} from 'vue'
	import customLoadingVue from '@/components/customLoading.vue'
	import bottomCompanyVue from '@/components/bottomCompany.vue'
	const instance = getCurrentInstance()
	const commonJs = instance?.proxy?.$commonJs
	const groupName = ref('《零点管理系统》')
	const phone = ref('')
	const password = ref('')
	const loading = ref(Object)
	const loadStatus = ref(false)
	const footerStyle = ref({
		position: 'absolute',
		bottom: '20rpx',
		left: 0
	})
	const login = () => {
		if (!phone.value) {
			commonJs.showMessage('账户不能为空！')
			return
		}
		if (!password.value) {
			commonJs.showMessage('密码不能为空！')
			return
		}
		if (loadStatus.value) {
			commonJs.showMessage('请求过于频繁！')
			return
		}
		const params = {
			name: phone.value,
			password: password.value,
			group_id: commonJs.getRequestShopId()
		}
		commonJs.queryCache('/group/groupLogin', params, {
			before() {
				loading.value.show('加载中...')
				loadStatus.value = true
			},
			success(res) {
				try {
					const {
						code,
						data,
						msg,
						server_ip
					} = res
					commonJs.systemConfig.userInfo = data
					commonJs.systemConfig.headerObj['Authorization-Token'] = data.token.token
					commonJs.setStorage(
						'userInfo',
						data,
						function() {
							// 获取集团门店列表
							shopList()	
							uni.reLaunch({
								url: '/pages/tabBar/group'
							})
						}
					)
				} catch (error) {
					commonJs.showMessage(error)
				}
			},
			fail(err) {
				commonJs.logger.debug(err, 'error')
			},
			complete() {
				loading.value.hide()
				loadStatus.value = false
			}
		})
	}
	const shopList = () => {
		const params = {
			group_id: commonJs.getRequestShopId(),
			staff_id: commonJs.getUserInfo().staff_id
		}
		commonJs.queryCache('/group/getGroupShop', params, {
			before() {
				
			},
			success(res) {
				try {
					const {
						code,
						data,
						msg,
						server_ip
					} = res
					commonJs.systemConfig.groupShopList = data
					commonJs.setStorage(
						'groupShopList',
						JSON.stringify(data),
						function() {
							// commonJs.logger.debug('获取集团门店列表成功')
						}
					)
				} catch (error) {
					commonJs.showMessage(error)
				}
			},
			fail(err) {
				commonJs.logger.debug(err, 'error')
			},
			complete() {
				
			}
		})
	}

	const toBind = () => {
		uni.reLaunch({
			url: '/pages/bind'
		})
	}
	onMounted(() => {
		let groupInfo = commonJs.getGroupInfo()
		if (groupInfo.hasOwnProperty('group_name') && groupInfo.group_name) {
			groupName.value = '《' + groupInfo.group_name + '》'
		}
	})
</script>

<style lang="scss" scoped>
	.bind-head {
		background: var(--bg-center-color);
		height: 300rpx;
	}

	.uni-input {
		background-color: var(--bg-center-color);
		width: 100%;
		display: flex;
		height: 78rpx;
		flex: 1;
		text-indent: 20rpx;
		border-radius: 8rpx;
		color: var(--white-text);
	}

	.btn-login {
		width: 100%;
		height: 70rpx;
		line-height: 70rpx;
		color: #fff;
		letter-spacing: 20rpx;
	}
</style>